<template>
	<RegularPage :currentTabbar="1" name="工作台">
		<view v-for="(item,index) in workTopMenu" :key="item.id" class="tn-pb-sm">
			<view class="tn-flex items-center justify-between tn-p-sm tn-pt-0-xs">
				<tn-title :title="item.name" mode="vLine" assist-color="tn-blue" />
				<view class="tn-gray-dark_text tn-text-sm tn-flex-center">
					<text>更多</text>
					<tn-icon name="right" />
				</view>
			</view>
			<view class="list tn-p-sm">
				<view class="item tn-flex-column" @click="goItemPage(i.path)" v-for="i in item.children" :key="i.id">
					<view class="tn-radius tn-gray-light_bg tn-flex-column tn-flex-center-center tn-pt tn-pb">
						<tn-avatar :url="i.icon" shape="square" />
					</view>
					<text class="tn-text-sm tn-mt-xs tn-text-center tn-gray-dark_text">{{i.name}}</text>
				</view>
			</view>
			<view class="gap" v-if="index < workTopMenu.length - 1"></view>
		</view>
	</RegularPage>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		getWorkTopMenu()
	})

	const workTopMenu = ref([])

	// 获取工作台菜单
	const getWorkTopMenu = () => {
		workTopMenu.value = [{
			name: '系统功能',
			children: [{
				id: 1,
				path: '/pages_worktop/accountManagement/accountManagement',
				name: '客户管理',
				icon: '/static/worktop/account.png'
			}, {
				id: 2,
				path: '/pages_worktop/merchantConfig/merchantConfig',
				name: '商家配置',
				icon: '/static/worktop/sellerSet.png'
			}, {
				id: 3,
				path: '/pages_worktop/specials/specials',
				name: '特价商品',
				icon: '/static/worktop/specials.png'
			}, {
				id: 3,
				path: '/pages_worktop/orderManagement/orderManagement',
				name: '订单管理',
				icon: '/static/worktop/order.png'
			}, {
				id: 4,
				path: '/pages_worktop/financeManagement/financeManagement',
				name: '财务管理',
				icon: '/static/worktop/finance.png'
			}]
		}, {
			name: '商家管理',
			children: [{
				id: 1,
				path: '/pages_worktop/apply/apply?app_type=' + 'seller',
				name: '申请记录',
				icon: '/static/worktop/applyLog.png'
			}, {
				id: 2,
				path: '/pages_worktop/accountManagement/accountManagement?app_type=' + 'seller',
				name: '用户列表',
				icon: '/static/worktop/userList.png'
			}, {
				id: 3,
				path: '/pages_worktop/merchantCategory/merchantCategory',
				name: '商家分类',
				icon: '/static/worktop/sellerCate.png'
			}, {
				id: 4,
				path: '/pages_worktop/merchantVoucher/merchantVoucher',
				name: '商家代金券',
				icon: '/static/worktop/voucher.png'
			}, {
				id: 5,
				path: '/pages_worktop/merchantVoucherAddLogs/merchantVoucherAddLogs',
				name: '增发记录',
				icon: '/static/worktop/add.png'
			}, {
				id: 5,
				path: '/pages_worktop/merchantCombo/merchantCombo',
				name: '套餐管理',
				icon: '/static/worktop/combo.png'
			}, ]
		}, {
			name: '配送管理',
			children: [{
				id: 1,
				path: '/pages_worktop/apply/apply?app_type=' + 'delivery',
				name: '申请记录',
				icon: '/static/worktop/applyLog.png'
			}, {
				id: 2,
				path: '/pages_worktop/accountManagement/accountManagement?app_type=' + 'delivery',
				name: '用户列表',
				icon: '/static/worktop/userList.png'
			}, {
				id: 3,
				path: '/pages_worktop/deliverySettleCycleConfig/deliverySettleCycleConfig',
				name: '结算周期',
				icon: '/static/worktop/cycle.png'
			}, {
				id: 4,
				path: '/pages_worktop/deliveryGoodsCategory/deliveryGoodsCategory',
				name: '商品分类',
				icon: '/static/worktop/goodClass.png'
			}, {
				id: 5,
				path: '/pages_worktop/deliveryGoodsList/deliveryGoodsList',
				name: '商品列表',
				icon: '/static/worktop/goodList.png'
			}]
		}, {
			name: '销售管理',
			children: [{
				id: 1,
				path: '/pages_worktop/apply/apply?app_type=' + 'sale',
				name: '申请记录',
				icon: '/static/worktop/applyLog.png'
			}, {
				id: 2,
				path: '/pages_worktop/accountManagement/accountManagement?app_type=' + 'sale',
				name: '用户列表',
				icon: '/static/worktop/userList.png'
			}]
		}]
	}
	// 跳转路由页面
	const goItemPage = (path) => {
		uni.navigateTo({
			url: path
		})
	}
</script>

<style scoped lang="scss">
	.list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
	}
</style>